.exchange {
	scroll-content {
	   background-image: url(../../assets/img/bg-exchange.png);
	     .result {
         .my-grid {
           position: relative;
           .my-col {
             position: relative;
             margin-bottom: 0.5rem;
             float: left;
             padding: 0rem;
             border: 0;
             width: 25%;

             .col-inner {
               position: absolute;
               margin: auto;
               top: 0;
               bottom: 0;
               left: 0;
               right: 0;
               width: 80%;
               height: 80%;

               .img {
                 margin: 0;
                 height: 80%;
                 text-align: center;
                 background-size: contain;
                 background-repeat: no-repeat;
                 background-position: center;
                 img {
                   height: 100%;
                   border-radius: 100%;
                 }
               }
               .text {
                color: white;
                font-size: 1.6rem;
               }
             }
           }
         }
       }

	   .search {
	       position:absolute;
		   left: 0;
	       bottom: 5rem;
	       width: 100%;
	       
	       .tips {
	           margin-bottom: 1rem;
		       width: 100%;
		       text-align: center;
		       color: white;
		       font-size: 1.4rem;
		   }

	       .pointerAnim {
			    will-change: transform;
			    transform-origin: 50% 100%;
			    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
			    background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, transparent 100%);
			    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, transparent 100%);
			    animation: rotate360 3s infinite linear;
			}
			.pointer {
			    position: absolute;
			    left: 0%;
			    right: 0%;
			    top: 0%;
			    bottom: 50%;

			    &:after {
			        content: "";
			        position: absolute;
			        left: 0;
			        width: 50%;
			        bottom: -1px;
			        border-top: 2px solid rgba(255, 255, 255, 0.8);
			        box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
			        border-radius: 9px;
			        -webkit-animation: extend 1s linear;
			        animation: extend 1s linear;
			    }
			}

			.border0, .border1, .border2, .border3 {
			    border: 0.1rem solid rgba(255,255,255,0.3);
			    border-radius: 50%;
			}

			.border1 {
			    position: relative;
			    width: 12rem;
			    height: 12rem;
			    margin: 0 auto;
			    .border2 {
			        width: 8rem;
			        height: 8rem;
			        margin: 1.9rem;
			        .border3 {
			            width: 4rem;
			            height: 4rem;
			            margin: 1.9rem;
			            .radar {
			                position: relative;
			                width: 4rem;
			                height: 4rem;
			                background-color: transparent;
			                border-radius: 50%;
			                .avatar {
			                    display: inline-block;
			                    width: 100%;
			                    height: 100%;
			                    border: 2px solid #fff;
			                    border-radius: 50%;
			                    overflow: hidden;
			                    box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.7);
			                }
			            }
			        }
			    }
			}
	   }

	}
}

@keyframes rotate360 {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}
